<template>
  <div class="room-card flex-col-start">
    <div class="flex-row-start room-card-header">
      <el-image class="image" :src="computedRoomImage"></el-image>
      <div class="flex-col-start content">
        <div style="font-size: 25px;font-weight: 550;width: 100%;text-align: left;margin-bottom: 10px" >{{room.roomName}}</div>
         <div class="flex-row-start">
           <div v-if="room.bathroom === 1" class="flex-row-start stuff-info-item">
             <i class="iconfont icon icon-classshuilongtouhuasaanzhuang"></i>
             <div>独立花洒</div>
           </div>

           <div v-if="room.area" class="flex-row-start stuff-info-item">
             <i class="iconfont icon icon-mianji"></i>
             <div>约{{room.area}}㎡</div>
           </div>

           <div v-if="room.bed" class="flex-row-start stuff-info-item">
             <i class="iconfont icon icon-chuang"></i>
             <div>{{room.bed.bedName}}</div>
           </div>

         </div>
          <TextLink >更多详情
            <i class="el-icon-arrow-right"></i>
          </TextLink>

      </div>
    </div>
    <el-divider></el-divider>
    <div class="flex-row-start room-card-body">
      <div class="ttl flex-row-start">
        <div style="word-break: keep-all">{{formatDate(new Date(room.fromDate))}}</div>
        <div style="color: teal;margin: 0 10px">
          <i class="el-icon-right"></i>
        </div>
        <div  style="word-break: keep-all">     {{formatDate(new Date(room.toDate))}}搬出</div>
      </div>
       <div class="flex-col-start price-part">
         <div>
            <span class="price">{{room.currency}} {{room.price}}</span>
           /周
         </div>
        <CommonButton style="width: 50px;margin-top: 5px" @click="showForm=true">选择</CommonButton>
       </div>
    </div>
    <div class="flex-row-end room-car-bottom">
      <TextLink>查看已租满的租期选择</TextLink>
    </div>

    <el-drawer
        title="您已选择这个房间"
        :visible.sync="showForm"
        direction="rtl"
        :before-close="handleClose">
        <RoomPayCard :room="room" @success="handlePaySuccess" @error="handlePayError"></RoomPayCard>
    </el-drawer>

  </div>
</template>

<script>
import TextLink from "@/components/TextLink.vue";
import TransButton from "@/components/button/TransButton.vue";
import CommonButton from "@/components/button/CommonButton.vue";
import RoomPayCard from "@/components/card/RoomPayCard.vue";
import {formatDate} from "../../util/DateUtil";

export default {
  name: "RoomCard",
  components: {RoomPayCard, CommonButton, TransButton, TextLink},
  props:{
    room:{
      type:Object
    }
  },
  data() {
    return {
      showForm:false,
    }
  },
  methods: {
    formatDate,
    handlePaySuccess(obj){
      this.$message.success("支付成功")
      this.showForm=false
    },
    handlePayError(){
      this.$message.error("超出支付时间,订单取消")
      this.showForm=false
    },
    handleClose(done){
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});

    }
  },
  computed:{
    computedRoomImage(){
      if(this.room.imageList.length>0){
        return this.room.imageList[0]
      }
      return ""
    },

  }
}
</script>

<style scoped lang="less">
  .room-card{
    width: 100%;
    padding: 20px;
    background-color: white;
    box-shadow: var(--box-shadow);

    .room-card-header{
      width: 100%;
      .image{
        width: 128px;
        height: 78px;
        margin-right: 10px;
      }
      .content{

        .icon{
          font-size: 14px;
          margin-right: 3px;
        }
        .stuff-info-item{
          margin-right: 20px;
          font-size: 12px;
          color: #808080;
        }
      }

    }
    .room-card-body{
      width: 100%;
      padding: 10px 5px;
      border-radius: 5px;
      .ttl{
        flex: 7;
        font-size: 14px;
        color: black;
      }
      .price-part{
        flex: 3;

      }
      &:hover{
        background-color: #efefef;
      }
    }
    .room-car-bottom{
      width: 100%;
      height: 50px;
    }
  }
</style>